<template>
    <div class="flex flex-col gap-[0.75rem]">
        <el-input
            v-model="content"
            type="textarea"
            :rows="2"
            :placeholder="placeholder"
            resize="none"
            maxlength="200"
            show-word-limit
            ref="textareaRef"
        />
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-[1rem]">
                <div class="flex items-center gap-[0.5rem]">
                    <EmojiPicker @select="onSelectEmoji">
                        <img src="/public/icon/add-emoji.png" class="w-[1.25rem] h-[1.25rem] cursor-pointer" alt="表情">
                    </EmojiPicker>
                </div>
                <div class="flex items-center gap-[0.5rem] cursor-pointer">
                    <img src="/public/icon/add-image.png" class="w-[1.25rem] h-[1.25rem]" alt="图片">
                </div>
            </div>
            <div class="flex items-center gap-[0.75rem]">
                <el-button v-if="showCancelButton" @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit" :disabled="!content.trim()">发布评论</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { message } from '@/utils/message'
import EmojiPicker from '@/components/EmojiPicker/index.vue'
import type { ElInput } from 'element-plus'

interface Props {
    // 帖子ID
    postId?: number
    // 评论ID（如果是回复评论）
    commentId?: number
    // 回复的用户名（如果是回复评论）
    replyTo?: string
    // 回复ID（如果是回复另一条回复）
    replyId?: number
}

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits(['submit', 'cancel'])

// 评论内容
const content = ref('')
const textareaRef = ref<InstanceType<typeof ElInput> | null>(null)

// 是否显示取消按钮（回复评论时显示）
const showCancelButton = computed(() => {
    return !!props.commentId
})

// 占位符文本
const placeholder = computed(() => {
    if (props.replyTo) {
        return `回复 ${props.replyTo}：`
    }
    return '发表你的评论...'
})

// 选择表情
const onSelectEmoji = (emoji: any) => {
    // 获取光标位置
    const textarea = textareaRef.value?.$el.querySelector('textarea')
    if (!textarea) return
    
    const start = textarea.selectionStart || 0
    const end = textarea.selectionEnd || 0
    
    // 在光标位置插入表情
    const newContent = content.value.substring(0, start) + 
                      emoji.i + 
                      content.value.substring(end)
    
    content.value = newContent
    
    // 设置新的光标位置
    setTimeout(() => {
        textarea.focus()
        textarea.setSelectionRange(start + emoji.i.length, start + emoji.i.length)
    }, 0)
}

// 提交评论
const handleSubmit = () => {
    if (!content.value.trim()) {
        message.warning('请输入评论内容')
        return
    }

    // 构建评论数据
    const commentData = {
        content: content.value,
        postId: props.postId,
        commentId: props.commentId,
        replyTo: props.replyTo,
        replyId: props.replyId,
        time: new Date().toISOString()
    }

    // 触发提交事件
    emit('submit', commentData)
    
    // 清空输入框
    content.value = ''
}

// 取消评论
const handleCancel = () => {
    content.value = ''
    emit('cancel')
}
</script>

<style scoped>
:deep(.el-textarea__inner) {
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    resize: none;
}

:deep(.el-textarea__inner:focus) {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

:deep(.el-textarea__count) {
    color: #9CA3AF;
    font-size: 0.75rem;
}
</style> 